<template>
  <div class="catelist">
    <div class="header">
      <p>
        <span class="text1">商品名称:</span
        ><el-input
          v-model="searchValue.name"
          style="width: 200px"
          placeholder="请输入商品名称"
        />
      </p>
      <p style="width: 100%;">
        <span class="text1"></span>
        <el-button type="primary">搜索</el-button>
        <el-button>重置</el-button>
        
      </p>
    </div>
    <div class="table">
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="_id" label="分类ID"/>
        <el-table-column prop="name" label="分类名称"/>
        <el-table-column prop="createdAt" label="创建时间"/>
        <el-table-column prop="status" label="状态"/>
      </el-table>
      <el-pagination
        @current-change="currentPage"
        style="padding-top: 20px"
        background
        layout="prev, pager, next"
        :total="total"
      />
    </div>
  </div>
</template>

<script setup>
import router from "@/router";
import { getData } from "@/utils/way";
import { onMounted, ref } from "vue";

let list = ref([])
let page = ref(1)
let total = ref(-1)
let searchValue = ref({
  name:'',
})
let getlist = async ()=>{
  let {data} = await getData('/szh/catelist?page='+page.value)
  list.value = data.list
  total.value = data.total
  console.log(data);
}
let currentPage = (val)=>{
  page.value = val;
  getlist();
}
onMounted(()=>{
  getlist();
})
</script>

<style>
.catelist > div {
  background-color: #fff;
  padding: 20px;
}
.catelist {
  width: 100%;
}
.catelist .header {
  width: 100%;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.header p {
  width: 25%;
  height: 50px;
  line-height: 50px;
}
.table {
  margin-top: 20px;
}
.text1 {
  width: 100px;
  display: inline-block;
  text-align: right;
  padding-right: 10px;
}
</style>